<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

    <!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>zFanVideo | Free Video Html5 Templates</title>
	<meta name="description" content="Free Responsive Html5 Css3 Templates | zerotheme.com">
	<meta name="author" content="www.zerotheme.com">
	
    <!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <!-- CSS
  ================================================== -->
  	<link rel="stylesheet" href="__STATIC__/index/css/zerogrid.css">
	<link rel="stylesheet" href="__STATIC__/index/css/style.css">
	<link rel="stylesheet" href="__STATIC__/index/css/menu.css">
	<!-- Owl Carousel Assets -->
	<link href="__STATIC__/index/css/owl.carousel.css" rel="stylesheet">
    <link href="__STATIC__/index/css/owl.theme.css" rel="stylesheet">
	<!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	
	<!--[if lt IE 8]>
       <div style=' clear: both; text-align:center; position: relative;'>
         <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
           <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
        </a>
      </div>
    <![endif]-->
    <!--[if lt IE 9]>
		<script src="__STATIC__/index/js/html5.js"></script>
		<script src="__STATIC__/index/js/css3-mediaqueries.js"></script>
	<![endif]-->
    
</head>
<body id="wrapper" >
<div class="wrap-body">
	
	<!--////////////////////////////////////Header-->
	<header>
		<div class="wrap-header">
			<div class="zerogrid">
				<div class="row">
					<a href="index.html" class="logo"><img src="__STATIC__/index/images/logo.png" /></a>
					<ul class="quick-link">
						<li><a href="#" title="Upload Video"><i class="fa fa-upload"></i></a></li>
						<li><a href="#" title="Log in"><i class="fa fa-user"></i></a></li>
						<li><a href="#" title="Warning"><i class="fa fa-bell"></i></a></li>
					</ul>
					<ul class="social">
						<li><a href="#"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
						<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
						<li><a href="#"><i class="fa fa-instagram"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="zerogrid">
				<div class="row">
					<span>Welcome to Us - Contact Us at <a href="contact.html">联系我们</a></span>
				</div>
			</div>
		</div>
    </header>
	<!--////////////////////////////////////Menu-->
	<a href="#" class="nav-toggle">Toggle Navigation</a>
	<nav class="cmn-tile-nav">
		<ul class="clearfix">
			<li class="colour-1"><a href="gallery.html">首页</a></li>
			<li class="colour-2"><a href="gallery.html">会员</a></li>
			<li class="colour-3" style="height:120px;color:#fff;">
				<p>分类</p>
				<select style="width: 100%;position: absolute;bottom: 0px;">
					<{volist name="cates" id="vo"}>
					<option value="<{$vo.id}>"><{$vo.name}></option>
					<{/volist}>
				</select>
			</li>
			<li class="colour-4"><a href="gallery.html">联系</a></li>
		</ul>
	</nav>
	<!--////////////////////////////////////Container-->
	<section id="container" class="index-page">
		<div class="wrap-container zerogrid">
			<div class="row">
				<div id="main-content" class="col-2-3">
					<div class="wrap-vid">
						<!--<iframe width="100%" height="400" src="" frameborder="0" allowfullscreen></iframe>-->
						<link href="__STATIC__/index/ckplayernew/css/ckplayer.css" rel="stylesheet">
						<script type="text/javascript" src="__STATIC__/index/ckplayernew/hls.js/hls.js"></script>
						<script src="__STATIC__/index/ckplayernew/js/ckplayer.js"></script>
						<div class="video" style="width:100%;height:400px;"></div>
						<script>
							/*var videoObject = {
								container:'.video',//#代表容器ID,.或''代表容器class
								variable:'player',//必填,值应为下面的new ckplayer()的对象
								type:'m3u8',
								autoplay:true,
								//video:'http://www.video.cn/storage/mp4_m3u8/playlist.m3u8'//视频地址
								video:'http://www.tech366.cn/mp4_m3u8/playlist.m3u8'//视频地址
							}
							var player = new ckplayer(videoObject);*/
							var videoObject = {
								container: '.video', //容器的ID或className
								live:true,//指定为直播
								plug:'hls.js',//使用hls.js插件播放m3u8
								video:'http://www.tech366.cn/mp4_m3u8/playlist.m3u8'//视频地址
							}
							new ckplayer(videoObject);
						</script>
					</div>
					<div class="row">
						<div class="share">
							<div class="col-1-4">
								<div class="wrap-col">
									<div class="box-share">
										<a href="#">
											<i class="fa fa-comments"></i>
											<span>评论</span>
										</a>
									</div>
								</div>
							</div>
							<div class="col-1-4">
								<div class="wrap-col">
									<div class="box-share">
										<a href="#">
											<i class="fa fa-twitter"></i>
											<span>Twitter </span>
										</a>
									</div>
								</div>
							</div>
							<div class="col-1-4">
								<div class="wrap-col">
									<div class="box-share">
										<a href="#">
											<i class="fa fa-thumbs-up"></i>
											<span>110</span>
										</a>
									</div>
								</div>
							</div>
							<div class="col-1-4">
								<div class="wrap-col">
									<div class="box-share">
										<a href="#">
											<i class="fa fa-plus"></i>
											<span>Add</span>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<h1 class="vid-name"><{$info.title}></h1>
					<div class="info">
						<h5>By <a href="#">Kelvin</a></h5>
						<span><i class="fa fa-calendar"></i><{$info.addtime|date="Y-m-d H:i:s"}></span>
						<span><i class="fa fa-heart"></i>1,200</span>
					</div>
					<p><{$info.content}></p>
					<div class="tags">
						<a href="#">Animal</a>
						<a href="#">Aenean</a>
						<a href="#">Feugiat</a>
						<a href="#">Risus</a>
						<a href="#">Magna</a>
					</div>
					<section class="vid-related">
						<div class="header">
							<h2>Related</h2>
						</div>
						<div class="row"><!--Start Box-->
							<div id="owl-demo-1" class="owl-carousel">
								<div class="item wrap-vid">
									<div class="zoom-container">
										<a href="single.html">
											<span class="zoom-caption">
												<i class="icon-play fa fa-play"></i>
											</span>
											<img src="__STATIC__/index/images/1.jpg" />
										</a>
									</div>
									<h3 class="vid-name"><a href="#">视频名</a></h3>
									<div class="info">
										<h5>By <a href="#">Kelvin</a></h5>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
								<div class="item wrap-vid">
									<div class="zoom-container">
										<a href="single.html">
											<span class="zoom-caption">
												<i class="icon-play fa fa-play"></i>
											</span>
											<img src="__STATIC__/index/images/2.jpg" />
										</a>
									</div>
									<h3 class="vid-name"><a href="#">视频名</a></h3>
									<div class="info">
										<h5>By <a href="#">Kelvin</a></h5>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
								<div class="item wrap-vid">
									<div class="zoom-container">
										<a href="single.html">
											<span class="zoom-caption">
												<i class="icon-play fa fa-play"></i>
											</span>
											<img src="__STATIC__/index/images/3.jpg" />
										</a>
									</div>
									<h3 class="vid-name"><a href="#">视频名</a></h3>
									<div class="info">
										<h5>By <a href="#">Kelvin</a></h5>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
								<div class="item wrap-vid">
									<div class="zoom-container">
										<a href="single.html">
											<span class="zoom-caption">
												<i class="icon-play fa fa-play"></i>
											</span>
											<img src="__STATIC__/index/images/4.jpg" />
										</a>
									</div>
									<h3 class="vid-name"><a href="#">视频名</a></h3>
									<div class="info">
										<h5>By <a href="#">Kelvin</a></h5>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
								<div class="item wrap-vid">
									<div class="zoom-container">
										<a href="single.html">
											<span class="zoom-caption">
												<i class="icon-play fa fa-play"></i>
											</span>
											<img src="__STATIC__/index/images/5.jpg" />
										</a>
									</div>
									<h3 class="vid-name"><a href="#">视频名</a></h3>
									<div class="info">
										<h5>By <a href="#">Kelvin</a></h5>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
								<div class="item wrap-vid">
									<div class="zoom-container">
										<a href="single.html">
											<span class="zoom-caption">
												<i class="icon-play fa fa-play"></i>
											</span>
											<img src="__STATIC__/index/images/14.jpg" />
										</a>
									</div>
									<h3 class="vid-name"><a href="#">视频名</a></h3>
									<div class="info">
										<h5>By <a href="#">Kelvin</a></h5>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
								<div class="item wrap-vid">
									<div class="zoom-container">
										<a href="single.html">
											<span class="zoom-caption">
												<i class="icon-play fa fa-play"></i>
											</span>
											<img src="__STATIC__/index/images/3.jpg" />
										</a>
									</div>
									<h3 class="vid-name"><a href="#">视频名</a></h3>
									<div class="info">
										<h5>By <a href="#">Kelvin</a></h5>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
								<div class="item wrap-vid">
									<div class="zoom-container">
										<a href="single.html">
											<span class="zoom-caption">
												<i class="icon-play fa fa-play"></i>
											</span>
											<img src="__STATIC__/index/images/5.jpg" />
										</a>
									</div>
									<h3 class="vid-name"><a href="#">视频名</a></h3>
									<div class="info">
										<h5>By <a href="#">Kelvin</a></h5>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
							</div>
						</div>
					</section>
				</div>
				<div id="sidebar" class="col-1-3">
					<form id="form-container" action="">
						<!--<input type="submit" id="searchsubmit" value="" />-->
						<a class="search-submit-button" href="javascript:void(0)">
							<i class="fa fa-search"></i>
						</a>
						<div id="searchtext">
							<input type="text" id="s" name="s" placeholder="Search Something...">
						</div>
					</form>
					<!---- Start Widget ---->
					<div class="widget wid-post">
						<div class="wid-header">
							<h5>Latest Posts</h5>
						</div>
						<div class="wid-content">
							<div class="post wrap-vid">
								<div class="zoom-container">
									<a href="single.html">
										<span class="zoom-caption">
											<i class="icon-play fa fa-play"></i>
										</span>
										<img src="__STATIC__/index/images/4.jpg" />
									</a>
								</div>
								<div class="wrapper">
									<h5 class="vid-name"><a href="#">视频名</a></h5>
									<div class="info">
										<h6>By <a href="#">Kelvin</a></h6>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
							</div>
							<div class="post wrap-vid">
								<div class="zoom-container">
									<a href="single.html">
										<span class="zoom-caption">
											<i class="icon-play fa fa-play"></i>
										</span>
										<img src="__STATIC__/index/images/14.jpg" />
									</a>
								</div>
								<div class="wrapper">
									<h5 class="vid-name"><a href="#">视频名</a></h5>
									<div class="info">
										<h6>By <a href="#">Kelvin</a></h6>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
							</div>
							<div class="post wrap-vid">
								<div class="zoom-container">
									<a href="single.html">
										<span class="zoom-caption">
											<i class="icon-play fa fa-play"></i>
										</span>
										<img src="__STATIC__/index/images/3.jpg" />
									</a>
								</div>
								<div class="wrapper">
									<h5 class="vid-name"><a href="#">视频名</a></h5>
									<div class="info">
										<h6>By <a href="#">Kelvin</a></h6>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!---- Start Widget ---->
					<div class="widget wid-news">
						<div class="wid-header">
							<h5>Top News</h5>
						</div>
						<div class="wid-content">
							<div class="row">
								<div class="wrap-vid">
									<div class="zoom-container">
										<a href="single.html">
											<span class="zoom-caption">
												<i class="icon-play fa fa-play"></i>
											</span>
											<img src="__STATIC__/index/images/1.jpg" />
										</a>
									</div>
									<h3 class="vid-name">视频名</h3>
									<div class="info">
										<h5>By <a href="#">Kelvin</a></h5>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="wrap-vid">
									<div class="zoom-container">
										<a href="single.html">
											<span class="zoom-caption">
												<i class="icon-play fa fa-play"></i>
											</span>
											<img src="__STATIC__/index/images/2.jpg" />
										</a>
									</div>
									<h3 class="vid-name">视频名</h3>
									<div class="info">
										<h5>By <a href="#">Kelvin</a></h5>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="wrap-vid">
									<div class="zoom-container">
										<a href="single.html">
											<span class="zoom-caption">
												<i class="icon-play fa fa-play"></i>
											</span>
											<img src="__STATIC__/index/images/4.jpg" />
										</a>
									</div>
									<h3 class="vid-name">视频名</h3>
									<div class="info">
										<h5>By <a href="#">Kelvin</a></h5>
										<span><i class="fa fa-calendar"></i>25/3/2015</span> 
										<span><i class="fa fa-heart"></i>1,200</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	<!--////////////////////////////////////Footer-->
	<footer>
		<div class="zerogrid top-footer">
			<div class="row">
				<div class="col-1-5">
					<a href="#"><img src="__STATIC__/index/images/15.jpg" /></a>
				</div>
				<div class="col-1-5">
					<a href="#"><img src="__STATIC__/index/images/16.jpg" /></a>
				</div>
				<div class="col-1-5">
					<a href="#"><img src="__STATIC__/index/images/17.jpg" /></a>
				</div>
				<div class="col-1-5">
					<a href="#"><img src="__STATIC__/index/images/18.jpg" /></a>
				</div>
				<div class="col-1-5">
					<a href="#"><img src="__STATIC__/index/images/19.jpg" /></a>
				</div>
			</div>
		</div>
		<div class="zerogrid wrap-footer">
			<div class="row">
				<div class="col-1-4 col-footer-1">
					<div class="wrap-col">
						<a href="index.html" class="logo"><img src="__STATIC__/index/images/logo.png" /></a>
						<p>Ut volutpat consectetur aliquam. Curabitur auctor in nis ulum ornare. Sed consequat, augue condimentum fermentum gravida, metus elit vehicula dui.</p>
					</div>
				</div>
				<div class="col-1-4 col-footer-2">
					<div class="wrap-col">
						<h3>Categories</h3>
						<ul>
							<li><a href="#">Action</a></li>
							<li><a href="#">Romantic</a></li>
							<li><a href="#">Cartoon</a></li>
							<li><a href="#">Zombies</a></li>
						</ul>
					</div>
				</div>
				<div class="col-1-4 col-footer-3">
					<div class="wrap-col">
						<h3>Recent Posts</h3>
						<ul>
							<li><a href="#">New Videos</a></li>
							<li><a href="#">Featured Videos</a></li>
							<li><a href="#">Most Viewed Videos</a></li>
							<li><a href="#">Sports Videos</a></li>
						</ul>
					</div>
				</div>
				<div class="col-1-4 col-footer-4">
					<div class="wrap-col">
						<h3>Flickr Photos</h3>
						<div class="row">
							<div class="col-1-4">
								<div class="wrap-col">
									<a href="#"><img src="__STATIC__/index/images/6.jpg" /></a>
									<a href="#"><img src="__STATIC__/index/images/10.jpg" /></a>
									<a href="#"><img src="__STATIC__/index/images/13.jpg" /></a>
								</div>
							</div>
							<div class="col-1-4">
								<div class="wrap-col">
									<a href="#"><img src="__STATIC__/index/images/7.jpg" /></a>
									<a href="#"><img src="__STATIC__/index/images/11.jpg" /></a>
									<a href="#"><img src="__STATIC__/index/images/6.jpg" /></a>
								</div>
							</div>
							<div class="col-1-4">
								<div class="wrap-col">
									<a href="#"><img src="__STATIC__/index/images/8.jpg" /></a>
									<a href="#"><img src="__STATIC__/index/images/12.jpg" /></a>
									<a href="#"><img src="__STATIC__/index/images/10.jpg" /></a>
								</div>
							</div>
							<div class="col-1-4">
								<div class="wrap-col">
									<a href="#"><img src="__STATIC__/index/images/9.jpg" /></a>
									<a href="#"><img src="__STATIC__/index/images/13.jpg" /></a>
									<a href="#"><img src="__STATIC__/index/images/8.jpg" /></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="zerogrid copyright">
			<div class="wrapper">
				Copyright 2015 - More Templates <a href="http://www.lanrenmb.com/" target="_blank" title="懒人模板">懒人模板</a> - Collect from <a href="http://www.lanrenmb.com/" title="网页模板" target="_blank">网页模板</a>
				<ul class="quick-link f-right">
					<li><a href="#">Privacy Policy</a></li>
					<li><a href="#">Terms of Use</a></li>
				</ul>
			</div>
		</div>
	</footer>

	<!-- Slider -->
	<script src="__STATIC__/index/js/jquery-2.1.1.js"></script>
	<script src="__STATIC__/index/js/demo.js"></script>
	<!-- Search -->
	<!--<script src="__STATIC__/index/js/modernizr.custom.js"></script>-->
	<script src="__STATIC__/index/js/classie.js"></script>
	<!--<script src="__STATIC__/index/js/uisearch.js"></script>-->
	<!--<script>
		new UISearch( document.getElementById( 'sb-search' ) );
	</script>-->
	<!-- Carousel -->
	<script src="__STATIC__/index/js/owl.carousel.js"></script>
    <script>
    $(document).ready(function() {

      $("#owl-demo-1").owlCarousel({
        items : 4,
        lazyLoad : true,
        navigation : true
      });
	  $("#owl-demo-2").owlCarousel({
        items : 4,
        lazyLoad : true,
        navigation : true
      });

    });
    </script>
</div>
</body></html>